<template>
  <div
    class="editor-button"
    :style="{
      flexDirection: vertical ? 'column' : 'row',
      justifyContent: vertical ? 'center' : 'space-between',
      minWidth: vertical ? 'null' : '100px'
    }"
  >
    <slot name="icon"></slot>
    <i v-if="!$slots['icon']" v-show="iconClass" class="btn-icon" :class="`${iconFamily} ${iconClass}`"></i>
    <div class="btn-text">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineOptions({ name: 'EditorButton' })
  const props = defineProps({
    iconFamily: { type: String, default: 't-icon' },
    iconClass: { type: String, default: '' },
    vertical: { type: Boolean, default: true }
  })

  const textMarginTop = computed(() => {
    return props.vertical ? '5px' : '0px'
  })
</script>

<style scoped>
  .editor-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-right: 12px;
    padding: 0 3px;
  }

  .editor-button:nth-last-child() {
    margin-right: 0;
  }

  .btn-icon {
    line-height: 1;
  }

  .btn-text {
    margin-top: v-bind(textMarginTop);
    font-size: 12px;
    line-height: 1;
  }

  .editor-button:hover {
    color: #409eff;
  }
</style>
